<template>
  <div class="c2cTrade">
    <Other-Header index="1" bgColor="#5741d9"></Other-Header>
    <div class="mainSection adSection tableSection">
      <div class="inner">
        <h3 class="title">{{$t('l.advert_about24')}}</h3>
        <div class="toolbar clearfix">
          <span class="label">{{$t('l.advert_about25')}}</span>
          <el-select :placeholder="$t('l.advert_about26')" v-model="queryForm.type" size="small">
            <el-option :label="$t('l.advert_about27')" value="1"></el-option>
            <el-option :label="$t('l.advert_about28')" value="2"></el-option>
          </el-select>
          <span class="label">{{$t('l.advert_about39')}}</span>
          <el-select
            :placeholder="$t('l.advert_about26')"
            v-model="queryForm.currencyCode"
            size="small"
          >
            <el-option v-for="item in currencyCodeList" :key="item.id" :label="item" :value="item"></el-option>
          </el-select>
          <span class="label">{{$t('l.advert_about29')}}</span>
          <el-select :placeholder="$t('l.advert_about26')" v-model="queryForm.status" size="small">
            <el-option :label="$t('l.advert_about31')" value="1"></el-option>
            <el-option :label="$t('l.advert_about32')" value="2"></el-option>
            <el-option :label="$t('l.advert_about33')" value="3"></el-option>
          </el-select>
          <div class="btnGroup">
            <el-button size="small" class="button" @click="updateMyAd">{{$t('l.advert_about34')}}</el-button>
            <el-button size="small" class="button" @click="resetQuery">{{$t('l.advert_about35')}}</el-button>
          </div>
        </div>
        <div class="adTable">
          <el-table :data="myAdList" style="width: 100%">
            <el-table-column
              prop="createTime"
              :label="$t('l.advert_about36')"
              align="center"
              width="190"
            ></el-table-column>
            <el-table-column prop="adNo" :label="$t('l.advert_about37')" width="208"></el-table-column>
            <el-table-column :label="$t('l.advert_about38')" width="58">
              <template slot-scope="scope">
                <span v-if="scope.row.type==1" style="color: #52C41A;">{{$t('l.advert_about27')}}</span>
                <span v-else style="color: #EF5756;">{{$t('l.advert_about28')}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="currencyCode" :label="$t('l.advert_about39')"></el-table-column>
            <el-table-column prop="price" :label="$t('l.advert_about40')"></el-table-column>
            <el-table-column :label="$t('l.advert_about41')" width="148">
              <template
                slot-scope="scope"
              >{{scope.row.quantityLimitMin}}-{{scope.row.quantityLimitMax}}{{scope.row.type==1?scope.row.currencyCode:scope.row.legalCurrencyCode}}</template>
            </el-table-column>
            <el-table-column :label="$t('l.advert_about42')">
              <template slot-scope="scope">{{scope.row.totalQuantity}}</template>
            </el-table-column>
            <el-table-column :label="$t('l.advert_about43')">
              <template slot-scope="scope">
                <span v-if="scope.row.status==1">{{$t('l.advert_about31')}}</span>
                <span v-else-if="scope.row.status==2">{{$t('l.advert_about32')}}</span>
                <span v-else-if="scope.row.status==3">{{$t('l.advert_about33')}}</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('l.advert_about46')" width="80">
              <template slot-scope="scope">
                <span class="paybox" v-for="item in scope.row.payModes" :key="item.id">
                  <img
                    style="vertical-align:middle;"
                    v-show="item==1"
                    src="../../assets/images/pay_zfb.png"
                  />
                  <img
                    style="vertical-align:middle;"
                    v-show="item==2"
                    src="../../assets/images/pay_weixin.png"
                  />
                  <img
                    style="vertical-align:middle;"
                    v-show="item==3"
                    src="../../assets/images/pay_cards.png"
                  />
                </span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('l.advert_about47a')" align="center" width="98">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.status==2"
                  @click="advup(scope.row)"
                  type="text"
                >{{$t('l.advert_about44')}}</el-button>
                <el-button
                  v-else-if="scope.row.status==1"
                  @click="disableAdvert(scope.row)"
                  type="text"
                >{{$t('l.advert_about45')}}</el-button>
                <el-button @click="editAd(scope.row)" type="text">{{$t('l.advert_about47b')}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="transPages">
          <el-pagination
            v-show="hasPagination"
            background
            layout="prev, pager, next"
            :page-count="pageCount"
            @current-change="onCurrentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import { api } from "../../api/api";
import OtherHeader from "@/components/otherHeader";
import Footer from "@/components/footer";

export default {
  components: {
    OtherHeader,
    Footer
  },
  data() {
    return {
      hasPagination: false,
      queryForm: {
        type: "",
        status: "",
        currencyCode: "",
        pageNum: 1
      },
      pageCount: 0,
      myAdList: [],
      currencyCodeList: []
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getCurrency();
      this.updateMyAd();
    },
    resetQuery() {
      this.queryForm = {
        currencyCode: "",
        pageNum: 1,
        status: "",
        type: ""
      };
      this.updateMyAd();
    },
    // 编辑广告
    editAd(data) {
      this.$router.push(`/editAdvert/${data.id}`);
    },
    disableAdvert(data) {
      let title = this.$t("l.advert_about48");
      let content = this.$t("l.advert_about49");
      let btnText = this.$t("l.advert_about50");

      this.$alert(content, title, {
        confirmButtonText: btnText,
        callback: action => {
          if (action === "confirm") {
            this.advdown(data);
          }
        },
        customClass: "ad-message-box content-center"
      });
    },
    //广告下架
    async advdown(data) {
      let res = await api.adDisable({ adId: data.id });
      let { code, msg } = res.data;

      if (code == 0) {
        this.$layer.msg(this.$t("l.advert_about54"));
        this.updateMyAd();
      } else {
        this.$layer.msg(msg);
      }
    },
    //广告上架
    async advup(data) {
      let res = await api.adEnable({ adId: data.id });
      let { code, msg } = res.data;

      if (code == 0) {
        this.$layer.msg(this.$t("l.advert_about55"));
        this.updateMyAd();
      } else {
        this.$layer.msg(msg);
      }
    },
    // 币种列表
    async getCurrency() {
      let res = await api.currency();
      let { code, data: items, msg } = res.data;

      if (code == 0) {
        items.forEach(item => {
          this.currencyCodeList.push(item);
        });
      } else {
        this.$layer.msg(msg);
      }
    },
    onCurrentChange(pageNum) {
      this.queryForm.pageNum = pageNum;
      this.updateMyAd();
    },
    async updateMyAd() {
      let params = {
        currencyCode: this.queryForm.currencyCode,
        pageNum: this.queryForm.pageNum,
        pageSize: 15,
        status: this.queryForm.status,
        type: this.queryForm.type
      };
      let res = await api.myAd(params);
      let { code, data, msg } = res.data;

      if (code == 0) {
        let { records: adList, pages } = data;
        this.myAdList = adList.map(item => ({
          id: item.adId,
          createTime: item.createTime,
          adNo: item.adNo,
          currencyCode: item.currencyCode,
          legalCurrencyCode: item.legalCurrencyCode,
          payModes: item.payModes.split(",").sort(),
          price: item.price,
          quantityLimitMax: item.limitMax,
          quantityLimitMin: item.limitMin,
          remark: item.remark,
          status: item.status,
          totalQuantity: item.totalQuantity,
          type: item.type
        }));
        this.pageCount = pages;
        this.hasPagination = this.pageCount > 1;
      } else {
        this.$layer.msg(msg);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.c2cTrade {
  background-color: #f7f8fc;
  position: absolute;
  min-height: 100%;
  width: 100%;
  padding-top: 100px;
  
  .mainSection {
    width: 1200px;
    margin: 20px auto 0;
    height: 990px;
    padding-bottom: 160px;
    box-sizing: border-box;
  }
  .inner {
    background-color: #fff;
    padding: 40px;
    height: 100%;
    box-sizing: border-box;
  }
}

.tableSection {
  .title {
    font-size: 18px;
    font-weight: 600;
    color: rgba(51, 56, 94, 1);
    line-height: 100%;
    border-left: 3px solid #2D8DFE;
    padding-left: 10px;
    margin-bottom: 33px;
  }
  .toolbar {
    margin-bottom: 16px;
    .label {
      padding-left: 20px;
      padding-right: 6px;
      font-size: 16px;
      color: #33385e;
    }

    .button {
      width: 71px;
      // height: 32px;
      border-radius: 4px;
      // border: 1px solid rgba(221, 224, 235, 1);
      // cursor: pointer;
    }

    .btnGroup {
      display: inline-block;
      margin-left: 20px;
    }

    .el-select {
      width: 100px;
      margin-right: 10px;
    }

    .el-input__inner {
      height: 32px;
    }
  }
  .adTable {
    font-size: 14px;
    color: #33385e;
    /deep/ thead tr {
      background-color: #f2f6fa;
    }
    /deep/ th {
      height: 50px;
      color: rgba(51, 56, 94, 0.6);
    }
  }
}

.transPages {
  margin-top: 40px;
  margin-bottom: 30px;
  width: 100%;
  text-align: center;
}
</style>
<style lang="less">
// 我的广告信息弹框
.el-message-box.ad-message-box {
  width: 452px;
  padding-bottom: 40px;
  .el-message-box__header {
    padding: 16px 15px 15px 23px;
    background: #f2f6fa;
  }
  .el-message-box__title {
    height: 24px;
    font-size: 16px;
    font-familyA: PingFangSC-Medium;
    font-weight: 500;
    color: #33385e;
    line-height: 24px;
  }
  .el-message-box__content {
    font-size: 14px;
    color: #33385e;
    height: 138px;
    padding: 57px 67px 0;
    text-align: left;
    box-sizing: border-box;
  }
  &.content-center .el-message-box__content {
    text-align: center;
  }
  .el-message-box__btns {
    text-align: center;
  }
  .el-button {
    width: 318px;
    background: linear-gradient(90deg,#3360FF 0%,#04A6FE 100%);
    border-radius: 4px;
  }
}
</style>


